<!-- eslint-disable vue/no-mutating-props -->
<template>
  <el-config-provider :locale="locale">
    <el-pagination
      model-value:current-page="props.currentPage"
      v-model:page-size="props.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="props.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-config-provider>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {defineProps,defineEmits} from 'vue'
//引入下面一项
import zhCn from "element-plus/lib/locale/lang/zh-cn";
//定义 locale
const locale = ref(zhCn);
const small = ref(false)
const background = ref(true)
const disabled = ref(false)

const props:any = defineProps({
  total:Number,
  currentPage:Number,
  pageSize:Number,
  
})
let emits = defineEmits(['handleSizeChange','handleCurrentChange']);
const handleSizeChange = (val: number) => {
  // eslint-disable-next-line vue/no-mutating-props
  props.pageSize = val
  emits('handleSizeChange',val)
}
const handleCurrentChange = (val: number) => {
  // eslint-disable-next-line vue/no-mutating-props
  props.currentPage = val
  emits('handleCurrentChange',val)
}
</script>

<style scoped>

</style>